<template>
<div>
  <div id="container">
    <div class="content">
      <div class="conten-item" 
        v-for="(item, index) in contenItem" 
        :key="index"
        :style="{'background':'url('+item.img+')', 'background-size':'cover'}"
        @touchstart.prevent="handleDown($event)"
        @touchmove.prevent="touchmove"
        @touchend.prevent="touchend"
        >
      </div>
    </div>
    <div class="select">
      <div class="item" 
        ref="selectItem"
        :data-id="item.id" 
        v-for="(item, index) in selects" :key="index" 
        :style="{'background':'url('+item.img+')', 'background-size':'cover'}"
        @click="handleAppend($event, index)"
        >
      </div>
    </div>
    <button class="btn" @click="takeScreenshot"> 截图</button>
  </div>
    <button class="btn" @click="z"> 保存</button>
</div>
</template>

<script>
import Vue from 'vue'
import '../language/index.js'
import html2canvas from '../../static/plug/html2canvas.js'
export default {



  data () {
    return {
      disX: 0,
      disY: 0,
      oDiv:null,
      selects: [
        {
          id: 1,
          img: 'http://tx.haiqq.com/uploads/allimg/170920/032512N24-4.jpg',
        },
        {
          id: 2,
          img: 'http://thumbs.dreamstime.com/x/%E7%BA%A2%E8%89%B2%E5%B0%8F%E7%9A%84%E7%9F%AE%E5%AD%90-45423102.jpg',
        },        {
          id: 3,
          img: 'http://img1.tplm123.com/2009/02/09/37954/-13271860003726.jpg',
        }
      ],
      contenItem:[],
      isMouseMove: false,
      IsMouseZoom: false,
    }
  },
  created() {
  },
    methods:{
      handleAppend (ev, index) {
        this.contenItem.push(this.selects[index])
      },

      handleDown(ev) {
        this.oDiv = ev.target;
        this.disX = ev.targetTouches[0].clientX - this.oDiv.offsetLeft;
        this.disY = ev.targetTouches[0].clientY - this.oDiv.offsetTop;
      },

      touchmove (ev) {
        let l = ev.targetTouches[0].clientX - this.disX;
        let t = ev.targetTouches[0].clientY - this.disY;

        this.oDiv.style.left = l + 'px';
        this.oDiv.style.top = t + 'px';
      },

        touchend  () {
          console.log('end');
      },

      // 生成canvas
      takeScreenshot() {
        let content_html = document.getElementsByClassName('content')[0];//要转化的div
        let width = content_html.offsetWidth;
        let height = content_html.offsetHeight;
        let offsetTop = content_html.offsetTop;
        let canvas = document.createElement("canvas");
        let context = canvas.getContext('2d');
        let scaleBy = Math.ceil(window.devicePixelRatio);
        canvas.width = width*scaleBy;
        canvas.height = (height+offsetTop)*scaleBy;
        context.scale(scaleBy,scaleBy);

        let opts = {
          allowTaint:true,//允许加载跨域的图片
          tainttest:true, //检测每张图片都已经加载完成
          scale:scaleBy, // 添加的scale 参数
          canvas:canvas, //自定义 canvas
          logging: false, //日志开关，发布的时候记得改成false
          width:width, //dom 原始宽度
          height:height //dom 原始高度

      };

        html2canvas(content_html, opts).then(canvas => {
            document.body.appendChild(canvas);
            canvas.style.width = width+"px";
            canvas.style.height = height+"px";
            document.getElementById('container').style.display = 'none';
        })
      },
      
      //canvas转png图片
      convertCanvasToImage(c) {
        console.log(c);
        
	      var image = new Image();
	      image.src = c.toDataURL();
	      return image;
      },

      z () {
        let c = document.getElementsByTagName('canvas')[0]
        let img = this.convertCanvasToImage(c)
        console.log(img);
        
      }
    }
}
</script>

 <style lang="scss" scoped="" type="text/css">
#container {
    .content {
        height: 5rem;
        background: #ccc;
        .conten-item {
            position: relative;
            width: 2rem;
            height: 2rem;
            position: absolute;
            top: 1rem;
            left: 50%;
            transform: translateX(-50%);
            cursor: move;
            span {
                background: url('./缩放.png');
                background-size: 100%;
                position: absolute;
                right: -10px;
                top: -10px;
                width: 20px;
                height: 20px;
                cursor: ne-resize;
            }
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .select {
        display: flex;
        .item {
            width: 2rem;
            height: 2rem;
            justify-content: space-between;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .btn {
        cursor: pointer;
    }
}
</style>

